<template>
    <div>
        <el-button @click="addOneDay">修改时间 +1</el-button>
        <el-button @click="changeTest">count + 1</el-button>
        <vxe-table border show-overflow
            ref="planBatchTable"
            height="300"
            size="small"
            :edit-rules="validRules"
            :edit-config="{trigger: 'click', mode: 'cell'}"
            :data="tableData">
            <vxe-table-column field="num" title="数量" :edit-render="{name: 'input'}"></vxe-table-column>
            <vxe-table-column field="date" title="日期">
                <template v-slot:header="{ column }">
                    <span style="color: red;">*</span>
                    <span>{{column.title}}</span>
                </template>
                <template  v-slot="{ row }">
                    <col-date-picker
                        type="date"
                        placeholder="选择日期"
                        v-model="row.date"
                        :test="test"
                    >
                    </col-date-picker>
                </template>
            </vxe-table-column>
        </vxe-table>
    </div>
</template>
<script>
import ColDatePicker from './ColDatePicker';

export default {
    components: {
        ColDatePicker
    },
    data() {
        return {
            test: '',
            tableData: [{
                num: '1',
                date: new Date(),
            }],
            validRules: {
                num: [
                    {required: true, message: '请输入数量'}
                ],
                date: [
                    {required: true, message: '请输入时间'}
                ]
            }
        }
    },
    methods: {
        addOneDay() {
            this.tableData.forEach((item) => {
                item.date = new Date(item.date.setTime(item.date.getTime() + 86400000));
                console.log('new date new date', item.date.toLocaleString());
            })
        },
        changeTest() {
            this.test = Date.now().toString();
        }
    }
}
</script>